<template>
	<view class="container">
		<image class="bg-img" src="/static/identity-switch/background.png"></image>
		<view class="content-box">
			<u-text size="20" margin="0 0 15px 0" bold text="请选择您的身份"></u-text>
			<u-text size="14" color="#96A3A5" text="方便我们为您提供给更准确的服务"></u-text>
			<view class="identity-box">
				<view :class="['identity-item identity-solver', selectedIdentity === 'SOLVER' ? 'active' : '']" @click="setIdentity('SOLVER')">
					<image class="identity-img" src="/static/identity-switch/solver.png"></image>
					<view class="identity-text-box">
						<u-text size="16" margin="0 0 10px 0" bold text="我是解决者"></u-text>
						<u-text size="14" color="#96A3A5" text="解决问题，获得报酬"></u-text>
					</view>
					<view class="icon-box">
						<up-icon v-if="selectedIdentity === 'SOLVER'" name="checkmark-circle-fill" color="#00CB6B" size="24"></up-icon>
					</view>
					<view v-if="selectedIdentity !== 'SOLVER'" class="no-select"></view>
				</view>
				<view :class="['identity-item identity-seek-solution', selectedIdentity === 'SEEKER' ? 'active' : '']" @click="setIdentity('SEEKER')">
					<image class="identity-img" src="/static/identity-switch/seek-solution.png"></image>
					<view class="identity-text-box">
						<u-text size="16" margin="0 0 10px 0" bold text="我是求解者"></u-text>
						<u-text size="14" color="#96A3A5" text="发布任务，寻找牛人"></u-text>
					</view>
					<view class="icon-box">
						<up-icon v-if="selectedIdentity === 'SEEKER'" name="checkmark-circle-fill" color="#F36C23" size="24"></up-icon>
					</view>
					<view v-if="selectedIdentity !== 'SEEKER'" class="no-select"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { getToken } from '@/utils/token.ts';
import { useUserStore } from '@/store/modules/user';

// 获取token
const token = getToken();

const userStore = useUserStore();
// 选中的身份
const selectedIdentity = computed<SelectIdType>(() => {
	return userStore.userInfo.userType;
});
// 切换身份
const setIdentity = (sign: SelectIdType) => {
	userStore.setUserInfo({ userType: sign });
	// 如果没有token，说明是游客身份, 选择后直接根据选中角色进入后面的页面
	if (!token) {
		uni.redirectTo({
			url: `/pages/index/index-${sign.toLowerCase()}`
		});
	} else {
		// 如果有token，说明是登录用户，选择后跳转到身份确认页面
		uni.redirectTo({
			url: `/pages/${sign.toLowerCase()}/my/index`
		});
	}
};
</script>

<style lang="scss" scoped>
@import '~@/styles/variable.scss';
.container {
	position: relative;
}
.bg-img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.content-box {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - #{$base-margin} * 2);
}

.identity-box {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
	margin-top: 30px;

	.identity-item {
		position: relative;
		width: 100%;
		aspect-ratio: 345 / 140;
		background-color: #fff;
		border-radius: 20pt;
		border: 2pt solid transparent;

		&.identity-solver.active {
			border: 2pt solid #00cb6b;
		}

		&.identity-seek-solution.active {
			border: 2pt solid #f36c23;
		}

		.identity-img {
			position: absolute;
			top: -15pt;
			left: 0;
			display: inline-block;
			width: 46%;
			height: auto;
			aspect-ratio: 160 / 131;
		}

		.identity-text-box {
			position: absolute;
			top: 50%;
			right: 40pt;
			transform: translateY(-50%);
		}

		.icon-box {
			position: absolute;
			top: 50%;
			right: 10pt;
			transform: translateY(-50%);
		}

		.no-select {
			position: absolute;
			top: 50%;
			right: 10pt;
			transform: translateY(-50%);
			width: 24px;
			height: 24px;
			border-radius: 50%;
			border: 1pt solid #ccc;
			box-sizing: border-box;
		}
	}
}
</style>
